<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::header-fragment">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</header>
<!-- 保留原有JS依赖 -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/admin/dist/js/adminlte.min.js}"></script>

<!-- 新增聊天功能JS -->
<script th:src="@{/mall/js/chat.js}"></script>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <div th:replace="admin/header::header-nav"></div>
    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>

    <!-- 修改后的内容区域 -->
    <div class="content-wrapper">
        <div class="content">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">DeepSeek 智能助手</h3>
                </div>
                <div class="card-body p-0">
                    <!-- 聊天消息容器 -->
                    <div id="chat-container" style="height: 60vh; overflow-y: auto; padding: 15px;">
                        <!-- 系统欢迎消息 -->
                        <div class="alert alert-info mb-2" style="max-width: 80%;">
                            您好！我是DeepSeek智能助手，随时为您提供服务
                            <small class="text-muted d-block mt-1">系统消息 · 刚刚</small>
                        </div>
                    </div>

                    <!-- 输入区域 -->
                    <div class="input-group p-3 border-top">
                        <textarea id="message-input"
                                  class="form-control"
                                  placeholder="输入您的问题..."
                                  rows="3"
                                  style="resize: none;"></textarea>
                        <div class="input-group-append">
                            <button id="send-btn" class="btn btn-primary ml-2">
                                <i class="fas fa-paper-plane"></i> 发送
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入页脚 -->
    <div th:replace="admin/footer::footer-fragment"></div>
</div>



<!-- 内联样式 -->
<style>
    /* 消息气泡样式 */
    .message-bubble {
        max-width: 80%;
        padding: 12px 15px;
        border-radius: 15px;
        margin: 8px 0;
        position: relative;
    }

    /* 用户消息 */
    .user-message {
        background-color: #e3f2fd;
        margin-left: auto;
        border-bottom-right-radius: 3px;
    }

    /* AI回复 */
    .ai-message {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        margin-right: auto;
        border-bottom-left-radius: 3px;
    }

    /* 时间戳 */
    .message-time {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 4px;
        display: block;
        text-align: right;
    }

    /* 输入框滚动条 */
    #message-input::-webkit-scrollbar {
        width: 6px;
    }
</style>
</body>
</html>